{{extend './layout.htm'}}

{{block 'css'}}
<style>
    #upload {
        position: relative;
    }
    #upload span {
        position: absolute;
        content: '';
        display: block;
        left: 0;
        top: 0;
        right: 100%;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .layui-table tr>*:nth-child(1) {
        text-align: center;
    }
    .layui-table tr>*:nth-child(2) {
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .layui-table tr>*:nth-child(7) {
        text-align: center;
    }
    .layui-table img {
        width: 50px;
    }
</style>
{{/block}}

{{block 'main'}}
<form class="layui-form table-tools">
    <div class="layui-input-inline input">
        <input type="text" name="keyword" value="{{keyword}}" autocomplete="off" class="layui-input" placeholder="请输入关键词">
    </div>
    <div class="sp5"></div>
    <div class="layui-input-inline">
        <button type="submit" class="layui-btn" lay-submit>搜索</button>
    </div>
    <div class="sp10"></div>
    <div class="layui-input-inline">
        <button type="button" class="layui-btn" id="upload">上传图片<span></span></button>
    </div>
    <input type="hidden" name="callback" value="{{callback}}">
</form>
<div class="table-wrap">
    <table class="layui-table">
        <thead>
            <tr><th>ID</th><th>图片</th><th>文件名字</th><th>类型</th><th>大小</th><th>原始文件</th><th>时间</th><th>操作</th></tr> 
        </thead>
        <tbody>
            {{each list item}}
            <tr>
                <td>{{item.id}}</td>
                <td><a href="{{item.image}}" target="blank" title="{{item.title}}"><img src="{{item.thumb}}"></a></td>
                <td class="image-title" data-title="{{item.title}}" data-image="{{item.image}}" data-thumb="{{item.thumb}}"><div>{{item.title}}</div></td>
                <td>{{item.extname}}</td>
                <td>{{item.size_text}}</td>
                <td>{{item.origin_size_text}}{{if item.origin_size_text}} (<a href="{{item.original}}" target="blank">view</a>){{/if}}</td>
                <td>{{item.add_time | dateFormat 'YYYY-mm-dd HH:ii'}}</td>
                <td><a href="{{url('form', {id: item.id})}}" class="layui-btn layui-btn-sm layui-btn-edit">编辑</a><a href="{{url('delete', {id: item.id})}}" class="layui-btn layui-btn-danger layui-btn-sm layui-btn-del">删除</a></td>
            </tr>{{/each}}
        </tbody>
    </table>
</div>
{{@pagination}}
{{/block}}

{{block 'js'}}
<script>
    var cb = "{{callback}}";

    layui.use('upload', function() {
        var upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload',
            url: '{{url("upload")}}',
            accept: 'images',
            done: function(res) {
                $("#upload span").css('right', '100%');
                layer.closeAll();

                //如果上传失败
                if(!res.state) {
                    return layer.msg(res.msg);
                }
                
                //上传成功
                layer.msg('上传成功！', {time: 600}, function() {
                    if(typeof parent[cb] == 'function') {
                        parent[cb](res.data);
                    } else {
                        history.go(0);
                    }
                });
            },
            error: function() {
                $("#upload span").css('right', '100%');
                layer.closeAll();
                layer.msg('上传出错了！');
            },
            before: function() {
                $("#upload span").css('right', '100%');
                layer.load();
            },
            progress: function(n, elem) {
                $("#upload span").css('right', (100 - n) + '%');
            }
        });

        // 删除
        $('a.layui-btn-danger').each(function() {
            var url = $(this).attr('href');
            $(this).attr('href', 'javascript:;').click(function() {
                layer.confirm("确定删除吗？", function(index) {
                    layer.close(index);
                    $.get(url, function(re) {
                        if(re.state) {
                            layer.msg(re.msg, function() {
                                history.go(0);
                            });
                        } else {
                            layer.msg(re.msg);
                        }
                    });
                });
            });
        });

    });

    // iframe调用
    $(function(){
        if(window != parent) {
            $('<style>body>header{display:none;}.table-wrap{height:250px;overflow-y:overlay;}.table-wrap::-webkit-scrollbar{width:6px;}.table-wrap::-webkit-scrollbar-thumb{background-color:#ddd;cursor:pointer;}.table-wrap .layui-table td.image-title{padding-top:5px;padding-bottom:5px;white-space:normal;word-break:break-all;}.table-wrap .layui-table td.image-title div{font-size:13px;line-height:16px;max-height:32px;overflow:hidden;}.table-wrap .layui-table td.image-title:hover{text-align:center;}.table-wrap .layui-table td.image-title:hover div{display:none;}.image-title .layui-btn{display:none;}.image-title:hover .layui-btn{display:inline-block;}.layui-btn-edit{display:none;}.layui-btn+.layui-btn-del{margin-left:0;}</style>').appendTo($('head'));
            $(".layui-table tr>*:nth-child(4)").hide();
            $(".layui-table tr>*:nth-child(5)").hide();
            $(".layui-table tr>*:nth-child(6)").hide();
            $(".layui-table tr>*:nth-child(7)").hide();
            $(".image-title").each(function() {
                var that = $(this);
                $('<span class="layui-btn layui-btn-sm" title="' + that.data('title') + '">选择图片</span>').click(function() {
                    if(typeof parent[cb] == 'function') {
                        parent[cb]({
                            title: that.data('title'),
                            image: that.data('image'),
                            thumb: that.data('thumb')
                        });
                    } else {
                        layer.msg('父窗口callback函数未定义！');
                    }
                }).appendTo(that);
            });
        }
    });
</script>
{{/block}}